<template>
    <div class="company">
       <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{nav[$route.params.type]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content" v-if="this.$route.params.type !== 'aboutus'">
          <el-row :gutter="40">
            <el-col v-for="item in serviceList" :key ="item.id" :span="8" :xs="24" style="margin-top: 10px; margin-bottom: 10px">
              <div class="item">
                <div style="height: 240px; overflow: hidden"><img height="100%" :src="item.img" ></div>
                <div v-if="item.group_name" class="item-title">
                  {{item.group_name}} <span>{{item.company_name}}</span>
                </div>
                <div v-if="item.title" class="item-title">
                  {{item.title}}
                </div>

                <div class="item-info">
                    {{item.synopsis || item.desc}}
                </div>
                <div class="go-detail">
                  <router-link :to="`/info/${$route.params.type}/${item.article_type[0]}/`">
                    查看详情
                  </router-link>
                </div>
                </div>
              </el-col>
          </el-row>
        </div>
        <div class="content about-content" v-if="this.$route.params.type == 'aboutus'">
        <el-row :gutter="20">
            <el-col v-for="(item, index) in serviceList" :key ="item.id" :span="12" :xs="24" style="margin-top: 10px;">
              <div class="item abouts-item">
                <div v-if="index == 0">
                  <div v-if="item.title" class="item-title" style="font-size: 24px;
    color: #999999;
    font-weight: bold;
    line-height: 31px;">
                  {{item.title}}
                  </div>
                   <div class="item-info">
                    {{item.synopsis || item.desc}}
                </div>
                <router-link class="see-com" :to="`/info/${$route.params.type}/${item.article_type[0]}/`">
                    深入了解
                  </router-link>
                </div>
                <div v-if="index !== 0">
                  <router-link :to="`/info/${$route.params.type}/${item.article_type[0]}/`"><img width="100%" :src="item.img" ></router-link></div>
                </div>
              </el-col>
          </el-row>
        </div>
        </div>
</template>

<script>
export default {
  data() {
    return {
      serviceList: '',
        nav: {
        aboutus: '关于我们',
        business: '公司产业',
        enterprise: '企业文化',
        hr: '人力资源'
      }
    }
  },
  created() {
    this.$request({url: `/${this.$route.params.type}/`}).then(result => {
      const {data} = result
      this.serviceList = data
    })
  },
  watch: {
    $route() {
      this.$request({url: `/${this.$route.params.type}/`}).then(result => {
      const {data} = result
      this.serviceList = data
    })
    }
  }
}
</script>

<style lang="stylus">
.company
  max-width 1160px
  width 100%
  min-height 600px
  margin 0 auto
  margin-top 98px
  padding 0 20px
  box-sizing border-box
  .content
    width 100%
    padding 40px
    padding-top 10px
    box-sizing border-box
    .item
      background-color #f1f1f1
      box-sizing border-box
      padding 30px 20px
      border-radius 5px
      &:hover
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
      .item-title
        font-size 17px
        line-height 40px
        height 40px
        font-weight 500
        span
         font-size 14px
         font-weight 400
      .item-info
        font-size 14px
        line-height 25px
        text-align justify
        height 70px
        overflow hidden
        text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      .go-detail
        margin-top 20px
        text-align right
        a
          font-weight 500
          font-size 14px
          color #d21c27
      &.abouts-item
        padding 0
        border-radius 0
        background-color #fff
        cursor pointer
        border: 0
        &:hover
          box-shadow: none
        .see-com
          margin-top: 25px;
          font-size: 13px;
          text-decoration: none;
          display: inline-block;
          width: 80px;
          height: 33px;
          line-height: 33px;
          text-align: center;
          font-weight: 500;
          color: #2c3e50
          cursor: pointer;
          border: 1px solid #d51a22;
          margin-bottom: 5px;
          &:hover
            border: 2px solid #d51a22;
        img
          border: 1px solid #f5f5f5;
          box-sizing border-box
          &:hover
            border: 1px solid #d51a22
        .item-info
          height auto
          -webkit-line-clamp 5
          margin-top 15px
  @media (min-width: 769px)
    .about-content
      margin: 0 auto;
      margin-top: 60px;
      margin-bottom 60px
      width: 75%;
@media (max-width: 769px)
  .company
    margin-top 0px
    .content
      padding 20px 0
  



</style>    
